<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width:100%;
        }
        .container {
            margin: 0 auto;
            margin-top:40px;
            width: 60%;
        }

        /*大屏幕 大桌面显示器 (≥1200px)*/
        @media (min-width:992px) {
            .col-lg-8 {
                width: 66.666666667%;
            }

            .col-lg-4 {
                width: 33.333333337%;
            }

            .col-lg-6 {
                width: 50%;
            }

            .col-lg-12 {
                width: 100%;
            }
        }
        /*小屏幕 平板 (≥768px)*/
        @media (min-width:768px) and (max-width:991px) {
            .col-sm-6 {
                width: 50%;
            }

            .col-sm-12 {
                width: 100%;
            }
        }
        /*超小屏幕 手机 (<768px)*/
        @media (max-width:767px) {
            .col-xs-12 {
                width: 100%;
            }
        }

        .margin-bottom {
            margin-bottom: 40px;
        }

        img {
            width: 100%;
        }

        .col-lg-8, .col-lg-4, .col-lg-6, .col-sm-6, .col-lg-12, col-sm-12, .col-xs-12 {
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--好消息-->
        <div class="col-lg-8 col-sm-12">
            <div class="col-lg-6 col-sm-6 .col-xs-12">
                <img src="goodMsg.png" class="margin-bottom" />
            </div>
            <div class="col-lg-6 col-sm-6 .col-xs-12">
                <img src="goodMsg.png" class="margin-bottom" />
            </div>
            <div class="col-lg-6 col-sm-6 .col-xs-12">
                <img src="goodMsg.png" class="margin-bottom" />
            </div>
            <div class="col-lg-6 col-sm-6 .col-xs-12">
                <img src="goodMsg.png" class="margin-bottom" />
            </div>
        </div>
        <!--最新文章、阅读排行榜、Tags-->
        <div class="col-lg-4 col-sm-12">
            <div class="col-lg-12 col-sm-12 .col-xs-12">
                <img src="Tags.png" class="margin-bottom" />
            </div>
            <div class="col-lg-12 col-sm-12 .col-xs-12">
                <img src="Tags.png" class="margin-bottom" />
            </div>
            <div class="col-lg-12 col-sm-12 .col-xs-12">
                <img src="Tags.png" class="margin-bottom" />
            </div>
        </div>
    </div>
</body>
</html>
